import {PageContainer} from '@ant-design/pro-layout';
import {useState} from "react";
import ProTable from "@ant-design/pro-table";
import {Switch} from "antd";
import style from './index.less'
import ShowSZ from "@/pages/Management/Message/Message_Settings/components/ShowSZ";

export default () => {
  const [tabKey, setTabKey] = useState('1')
  const [ isShowAdd, setisShowAdd ] = useState(false);
  const columns= [
    {
      title: 'ID',
      dataIndex: 'index',
      align: "center",
      width: 60,
    },
    {
      title: '通知类型',
      dataIndex: 'type',
      search: false,
      align: "center",
      width: 300,
    },
    {
      title: '通知场景说明',
      dataIndex: 'Notification',
      search: false,
      align: "center",
      width: 300,
    },

    {
      title: '站内信',
      dataIndex: 'phone',
      align: "center",
      width: 300,
      render: () => (
        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>
      )
    },

    {
      title: '公众号模板',
      width: 300,
      align: "center",
      search: false,
      render: () => (
        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>
      )
    },
    {
      title: '小程序订阅',
      width: 300,
      align: "center",
      onFilter: true,
      search: false,
      render: () => (
        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>
      )
    },
    {
      title: '发送短信',
      align: "center",
      dataIndex: '',
      width: 300,
      search: false,
    },
    {
      title: '企业微信',
      align: "center",
      dataIndex: '',
      width: 300,
      search: false,
      render: () => (
        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>
      )
    },
    {
      title: '设置',
      align: "center",
      width: 300,
      valueType: 'option',
      render: () => [
        <a onClick={()=>{setisShowAdd(true)}}>设置</a>,
      ],
    },
  ];
  // /--------------二---------------/
  const columns1 = [
    {
      title: 'ID',
      dataIndex: 'id',
      align: "center",
      search: false,
      width: 60,
    },
    {
      title: '通知类型',
      dataIndex: 'type',
      search: false,
      align: "center",
      width: 300,
    },
    {
      title: '通知场景说明',
      dataIndex: 'Notification',
      search: false,
      align: "center",
      width: 300,
    },

    {
      title: '站内信',
      dataIndex: 'phone',
      align: "center",
      width: 300,
      render: () => (
        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>
      )
    },

    {
      title: '公众号模板',
      width: 300,
      align: "center",
      search: false,
      render: () => (
        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>
      )
    },
    {
      title: '小程序订阅',
      width: 300,
      align: "center",
      search: false,
      render: () => (
        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>
      )
    },
    {
      title: '发送短信',
      align: "center",
      dataIndex: '',
      width: 300,
      search: false,
      render: () => (
        <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked/>
      )
    },
    {
      title: '企业微信',
      align: "center",
      dataIndex: '',
      width: 300,
      search: false,
    },
    {
      title: '设置',
      align: "center",
      width: 300,
      valueType: 'option',
      render: () => [
        <a onClick={()=>{setisShowAdd(true)}}>设置</a>,
      ],
    },
  ];
  const tabList = [
    {
      tab: '通知会员',
      key: '1',
      content:
        <div>
          <ProTable
            columns={columns}
            editable={ {type: 'multiple'} }
            rowKey="id"
            search={false}
            pagination={ {pageSize: 10} }
            dateFormatter="string"
          />
        </div>
    },
    {
      tab: '通知平台',
      key: '2',
      content:
        <div>
          <ProTable
            columns={columns1}
            editable={ {type: 'multiple',} }
            rowKey="id"
            search={false}
            pagination={ {
              pageSize: 5,
            } }
            dateFormatter="string"
          />
        </div>
    },
  ]
  let div = <>
    <div className={style.page}>
      <PageContainer
        fixedHeader
        header={ {
          breadcrumb: {},
        } }
        onTabChange={(key) => {
          setTabKey(key)
        }}
        tabList={tabList}
      >
        <div className={style.PageContainer}>
          <div className={style.div}>
            <div>主营行业：IT科技 | 互联网|电子商务</div>
            <div>副营行业：IT科技 | 互联网|电子商务</div>
          </div>
        </div>
        {
          // @ts-ignore
          tabList.map(item => {
            if (item.key === tabKey) {
              return item.content
            }
          })
        }
      </PageContainer>
      <ShowSZ isedit={isShowAdd} issetEdit={setisShowAdd} />
    </div>
  </>;
  return div
}
